<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix single-selection demo</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="./src/SingleSelectionDemo.js"></script>
  </head>

  <body role="main">
    <p>
      Click an item to select it:
    </p>
    <div class="demo">
      <style>
        single-selection-demo {
          cursor: default;
          display: inline-flex;
          -webkit-tap-highlight-color: transparent;
          -moz-user-select: none;
          -ms-user-select: none;
          -webkit-user-select: none;
          user-select: none;
        }

        single-selection-demo > * {
          align-items: center;
          border: 1px solid lightgray;
          display: inline-flex;
          height: 50px;
          justify-content: center;
          padding: 0.25em;
          width: 50px;
        }

        single-selection-demo > [selected] {
          background-color: highlight;
          color: highlighttext;
        }
      </style>

      <single-selection-demo>
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
      </single-selection-demo>
    </div>
  </body>
</html>
